<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color:#E6A23C">
            <h1 style="font-size: 22px;color:white">
                老有所依|敬老院后台管理系统
                <span style="float: right;font-size: 15px">
                    欢迎XXX回来
                    <a href="">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px" style="overflow: hidden">
                <!--侧边菜单开始-->
                <el-menu @select="handleSelect" default-active = "1-1">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>账号管理</span>
                        </template>
                        <el-submenu index="1-1">
                            <span slot="title">员工帐号</span>
                            <el-menu-item index="1-1-1" id="1-1-1">员工列表</el-menu-item>
                            <el-menu-item index="1-1-2" id="1-1-2">添加员工帐号</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="1-2" id="1-2">用户账号</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-cooperation"></i>
                            <span>健康管理</span>
                        </template>
                        <el-submenu index="2-1">
                            <span slot="title">健康档案</span>
                            <el-menu-item index="2-1-1" id="2-1-1">健康档案列表</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2-2">
                            <span slot="title">病例档案</span>
                            <el-menu-item index="2-2-1" id="2-2-1">病例档案列表</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2-3">
                            <span slot="title">药品管理</span>
                            <el-menu-item index="2-3-1" id="2-3-1">药品档案列表</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-promotion"></i>
                            <span>生活管理</span>
                        </template>
                        <el-submenu >
                            <el-menu-item  slot="title" index="3-1" id="3-1" style="margin-left: -60px">套餐管理</el-menu-item>
                            <el-menu-item index="3-1-1" id="3-1-1">餐品列表</el-menu-item>
                            <el-menu-item index="3-1-2" id="3-1-2" @click="foodInsert()">新增餐品</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="3-2" id="3-2">外出报备</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-home"></i>
                            <span>入住管理</span>
                        </template>
                        <el-menu-item index="4-1" id="4-1">入住登记</el-menu-item>
                        <el-menu-item index="4-2" id="4-2">宿舍分配</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-star-on"></i>
                            <span>事故管理</span>
                        </template>
                        <el-menu-item index="5-1" id="5-1">事故记录</el-menu-item>
                        <el-menu-item index="5-2" id="5-2">访客记录</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-s-finance"></i>
                            <span>收费标准</span>
                        </template>
                        <el-menu-item index="6-1" id="6-1">入住费用</el-menu-item>
                        <el-menu-item index="6-2" id="6-2">收费标准清单</el-menu-item>
                    </el-submenu>



                </el-menu>
                <!--侧边菜单结束-->
            </el-aside>
            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >
                    </el-tab-pane>
                </el-tabs>
                <!--用户表格开始-->
                <el-table v-if="editableTabsValue=='1-1-1'" :data="staffArr">
                    <!--显示序号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <!--显示分类名-->
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="role" label="权限等级"></el-table-column>
                    <!--操作列-->
                    <el-table-column label="操作" width="200">
                        <!--自定义列必须添加template标签 以及slot-scope="scope"
                        scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
                        scope.$index当前行对应的数组下标
                        scope.row当前行对应的数组里面的对象
                        -->
                        <!--                        21-->
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="staffUpdate(scope.$index, scope.row)">修改</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="staffDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-card style="width: 700px;height: 450px;
    margin: 0 auto;background-color: rgba(255,255,255,0.3)" v-if="editableTabsValue=='1-1-2'">
                    <!--label-width="55px" 让lable和文本框显示在一行之内-->
                    <el-form label-width="100px" style="width: 400px;margin: 50px auto">
                        <el-form-item label="用户名:">
                            <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:">
                            <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码:">
                            <el-input type="text" v-model="user.phoneNum" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="员工职位">
                            <template>
                                <el-select v-model="user.role" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-button type="warning" @click="staffInsert()"
                                   style="position:relative;left: 180px">添加员工帐号</el-button>
                        </el-form-item>

                    </el-form>
                </el-card>

                <!--套餐表格开始-->
                <div v-if="editableTabsValue=='3-1'">
                    <el-card style="float: left ;width: 500px;height: 100%;margin: 0 10px">
                        <el-divider content-position="left">套餐表格</el-divider>
                        <el-button  type="primary" icon="el-icon-edit"  @click="foodPackageInsert()">添加套餐</el-button>
                        <el-table  ref="multipleTable"
                                   tooltip-effect="dark"
                                   style="width: 100%"
                                   border
                                   v-if="editableTabsValue=='3-1'" :data="foodPackageArr">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column prop="name" label="套餐名称"></el-table-column>
                            <el-table-column label="操作" width="200">
                                <!--自定义列必须添加template标签 以及slot-scope="scope"
                                scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
                                scope.$index当前行对应的数组下标
                                scope.row当前行对应的数组里面的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="warning"
                                            @click="foodPackageUpdate(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="info"
                                            @click="foodPackageDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-card>

                    <!--  套餐餐品关联表开始-->
                    <el-card style="float: left ;width: 1100px;height: 100%;margin: 0 10px">
                        <el-divider content-position="left">套餐餐品表格</el-divider>
                        <el-button  type="primary" icon="el-icon-edit"  @click="foodPackageLinkInsert()">添加套餐餐品</el-button>
                        <el-table
                                ref="multipleTable"
                                tooltip-effect="dark"
                                style="width: 100%"
                                border
                                v-if="editableTabsValue=='3-1'" :data="foodPackageLinkArr">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column prop="foodPackageName" label="套餐名称"></el-table-column>
                            <el-table-column prop="foodName" label="餐品名称"></el-table-column>
                            <el-table-column prop="price" label="餐品价格"></el-table-column>
                            <el-table-column label="餐品图片">
                                <!--如果表格的列显示的内容不是来自于数组里面对象的属性,而是显示一些
                                其它的标签组成的内容时,需要自定义列-->
                                <!--自定义列 必须添加template标签-->
                                <template slot-scope="scope">
                                    <img :src="scope.row.foodUrl" width="50">
                                </template>
                            </el-table-column>
                            <el-table-column prop="foodPackageLinkMeal" label="餐品种类"></el-table-column>

                            <el-table-column label="操作" width="200">
                                <!--自定义列必须添加template标签 以及slot-scope="scope"
                                scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
                                scope.$index当前行对应的数组下标
                                scope.row当前行对应的数组里面的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="warning"
                                            @click="foodPackageUpdate(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="info"
                                            @click="foodPackageDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>


                    </el-card>


                </div>

                <!--健康表格开始_程辉-->
                <div v-if="editableTabsValue=='2-1-1'">
                    <el-button  type="primary" icon="el-icon-edit"  @click="olderInsert()">添加老人健康信息</el-button>
                    <el-table  :data="olderArr">
                        <!--显示序号-->
                        <el-table-column type="index" label="编号"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="gender" label="性别"></el-table-column>
                        <el-table-column prop="age" label="年龄"></el-table-column>
                        <el-table-column prop="height" label="身高"></el-table-column>
                        <el-table-column prop="weight" label="体重"></el-table-column>
                        <el-table-column prop="bp" label="血压"></el-table-column>
                        <el-table-column prop="bg" label="血糖"></el-table-column>
                        <el-table-column prop="bl" label="血脂"></el-table-column>
                        <!--操作列-->
                        <el-table-column label="操作" width="200">
                            <!--自定义列必须添加template标签 以及slot-scope="scope"
                            scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
                            scope.$index当前行对应的数组下标
                            scope.row当前行对应的数组里面的对象
                            -->
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="warning"
                                        @click="olderUpdate(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="info"
                                        @click="olderDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--健康表格结束-->
                </div>




                <!--餐品表格开始-->
                <el-table v-if="editableTabsValue=='3-1-1'" :data="foodArr">

                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="name" label="餐品名称"></el-table-column>
                    <el-table-column prop="price" label="餐品价格"></el-table-column>
                    <el-table-column label="餐品图片">
                        <!--如果表格的列显示的内容不是来自于数组里面对象的属性,而是显示一些
                        其它的标签组成的内容时,需要自定义列-->
                        <!--自定义列 必须添加template标签-->
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="50">
                        </template>
                    </el-table-column>

                    <!--操作列-->
                    <el-table-column label="操作" width="200">
                        <!--自定义列必须添加template标签 以及slot-scope="scope"
                        scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
                        scope.$index当前行对应的数组下标
                        scope.row当前行对应的数组里面的对象
                        -->
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="warning"
                                    @click="foodUpdate(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="info"
                                    @click="foodDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>

                    </el-table>

                <!--入住表格开始-->
                <!--高康-->
                <!--入住表格开始---->
                <div v-if="editableTabsValue=='4-1'" style="overflow: hidden">
                <el-button type="primary" icon="el-icon-edit" style="position: absolute" @click="checkInsert()">添加</el-button>
                    <el-input placeholder="请输入搜索的姓名" v-model="check_Content" class="input-with-select" style="width: 300px;position: relative;left: 80%">
                        <el-button slot="append" icon="el-icon-search" @click="checkSelectByname()"></el-button>
                    </el-input>
                <el-table :data="checkArr" style="margin-top: 30px;overflow: scroll;height: 600px;">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="gender" label="性别"></el-table-column>
                    <el-table-column prop="phoneNum" label="手机号"></el-table-column>
                    <el-table-column prop="checkDate" label="入住时间"></el-table-column>
                    <el-table-column prop="drugCreated" label="创建时间"></el-table-column>
                    <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="warning"
                                @click="checkUpdate(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button
                                size="mini"
                                type="info"
                                @click="checkDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
                    <!--分页-->
                    <div class="block" style="position: absolute;bottom: 60px;left: 30%;">
                        <el-pagination  background
                                @size-change="check_handleSizeChange"
                                @current-change="check_handleCurrentChange"
                                :current-page="check_currentPage"
                                :page-sizes="[10,20,30,40,50,60]"
                                :page-size="check_currentPageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="check_total">
                        </el-pagination>
                    </div>
                    <div style="position: fixed;top:30%;left: 30%;display: none">
                        <el-card style="width: 600px;height: 700px;">
                            <el-input type="text"></el-input>
                        </el-card>
                    </div>
                </div>

                <!--入住表格结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!--引入axios和vue框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: 'body>div',
        data: function () {
            return {
                staffArr: [],
                foodArr: [],
                /*菜单tabs数据*/
                editableTabsValue: '1-1-1',
                editableTabs: [],
                tabIndex: 0,
                user:{username:"",password:"",phoneNum:"",role:""},
                options: [
                    {
                        value: '2',
                        label: '护工'
                    }, {
                        value: '3',
                        label: '前台'
                    }],
                //入住登记数组
                checkArr:[],
                check_currentPage:1,
                check_currentPageSize:10,
                check_total:"",
                check_Content:"",

                //套餐表格相关数据
                foodPackageArr:[],
                foodPackageLinkArr:[],

                //健康表格相关数据_程辉
                olderArr:[]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                let title = document.getElementById(key).innerHTML;
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title:title,
                    name: key,
                });
                this.editableTabsValue = key;
            },
            //添加员工帐号事件方法
            staffInsert(){
                axios.post("/insertStaff",v.user).then(function (response) {
                    if (response.data==1){
                        alert("添加成功！！！");
                        axios.get("/selectStaff").then(function (response){
                            v.staffArr=response.data;
                        })
                        v.editableTabsValue ="1-1-1";

                    }else {
                        alert("该帐号已存在!!!!")
                    }
                })
            },
            //添加员工帐号事件方法
            staffInsert(){
                axios.post("/insertStaff",v.user).then(function (response) {
                    if (response.data==1){
                        alert("添加成功！！！");
                        axios.get("/selectStaff").then(function (response){
                            v.staffArr=response.data;
                        })
                        v.editableTabsValue ="1-1-1";

                    }else {
                        alert("该帐号已存在!!!")
                    }
                })
            },
            //修改员工帐号事件方法
            staffUpdate(i,u){
                location.href="/updateStaff.html?id="+u.id;
            },
            //删除员工帐号方法
            staffDelete(i,u){
                if (confirm("您确认删除此商品吗?")) {
                    //发出删除异步请求
                    axios.get("/deleteStaff?id=" +u.id)
                        .then(function () {
                            v.staffArr.splice(i, 1);
                            v.$message("删除成功!");
                        })
                }
            },
            //餐品管理的相关方法（袁田）
            foodPackageInsert(){
                location.href="/insertFoodPackage.html";
            },
            foodPackageUpdate(i,fp){
                location.href="/updateFoodPackage.html?id="+fp.id;
            },
            foodPackageDelete(i,foodPackage){
                if (confirm("您确认删除此套餐吗?")) {
                    //发出删除异步请求
                    axios.get("/foodPackage/delete?id=" + foodPackage.id)
                        .then(function () {
                            v.foodPackageArr.splice(i, 1);
                            v.$message("删除成功!");
                        })
                }
            },

            foodInsert(){//产品编辑方法
                location.href="/insertFood.html";
            },
            foodUpdate(i,f){//产品编辑方法
                location.href="/updateFood.html?id="+f.id;
            },
            foodDelete(i,food){//产品删除方法
                if (confirm("您确认删除此商品吗?")) {
                    //发出删除异步请求
                    axios.get("/food/delete?id=" + food.id)
                        .then(function () {
                            v.foodArr.splice(i, 1);
                            v.$message("删除成功!");
                        })
                }

            },
            foodPackageLinkInsert(){
                location.href="/insertFoodPackageLink.html";
            },
            /*删除菜单tabs方法*/
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            //入住登记修改
            checkUpdate(i, c) {

                location.href = "/updateCheckInfo.html?checkId="+c.checkId;
            },
            //入住登记删除
            checkDelete(i, c) {
                if(confirm("你确定删除此入住登记信息吗")) {
                    axios.get("/check/delete?checkId=" + c.checkId).then(function () {
                        v.checkArr.splice(i, 1);
                        v.$message("删除成功！")
                        axios.get("/check/selectLimit?page="+v.check_currentPage+"&pagesize="+v.check_currentPageSize).then(function (response)
                        {
                            v.checkArr = response.data;
                        })
                    })
                }
            },
            //入住登记分页
            checkLimit()
            {
                axios.get("/check/selectLimit?page="+v.check_currentPage+"&pagesize="+v.check_currentPageSize).then(function (response)
                {
                    v.checkArr = response.data;
                })
            }
            ,
            check_handleSizeChange(val) {
                v.check_currentPageSize=val;
                this.checkLimit();
            },
            check_handleCurrentChange(val) {
                v.check_currentPage=val;
                this.checkLimit();
            },
            /*入住登记姓名查询*/
            checkSelectByname()
            {
                v.check_currentPage=1;
                v.check_currentPageSize=10;
                axios.get("/check/checkSelectByname?name="+v. check_Content).then(function (response)
                {
                    v.checkArr = response.data;
                })
            },
            checkInsert()
            {

            },
            //跳转到添加老人健康信息页面_程辉
            olderInsert(){
                location.href="/insertOlder.html";
            }
        },
        created:function (){
         axios.get("/selectStaff").then(function (response){
                v.staffArr=response.data;
            })
            axios.get("/food/select").then(function (response){
                v.foodArr=response.data;
            })
            /*开始 高康*/
            /*获取入住登记信息*/
            axios.get("/check/select").then(function (response) {
                v.checkArr = response.data;
                v.check_total = v.checkArr.length;
                v.checkLimit();
            })
            //袁田：获取套餐信息
            axios.get("/foodPackage/select").then(function(response){
                v.foodPackageArr=response.data;
            })
            axios.get("/foodPackageLink/select").then(function(response){
                v.foodPackageLinkArr=response.data;
            })
            //获取老人健康信息——程辉
            axios.get("/older/select").then(function (response) {
                v.olderArr = response.data;
            })
        }
    })
</script>
</html>